<!DOCTYPE html>
<html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
<?php
	echo static_file('web/css/jquery.mCustomScrollbar.css');
	echo static_file('web/js/jquery.mCustomScrollbar.js');
	echo static_file('web/css/swiper4.min.css');
	echo static_file('web/css/swiper-4.1.6.min.js');;
	echo static_file('web/css/slick.css');
	echo static_file('web/js/slick.js');
?>
</head>

<body>
	<div class="main">
		<?php include_once VIEWS.'inc/header.php'; ?>
		<section class="solution">
			<div class="abanner">
				<img src="<?php echo static_file('web/img/solution.jpg')?>" alt="">
			</div>
			<div class="solution_box none">
				<div class="solution_top wow fadeInUp none" >
					<div class="solution_cen w1440">
						<div class="title">
							<div class="cn">商用产品</div>
							<div class="en">Commercial products</div>
						</div>
						<div class="ds">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>
					</div>
					<div class="solution_list f-cb w1440">
						<div class="left">
							<ul>
								<li class="active">
									<a href="<?php echo site_url('solution/list'); ?>">
										<div class="num">01</div>
										<div class="tab">
											<div class="tab_cell">
												<div class="cont">
													<div class="cn">太阳能</div>
													<div class="en">Solar energy</div>
												</div>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('solution/list'); ?>">
										<div class="num">02</div>
										<div class="tab">
											<div class="tab_cell">
												<div class="cont">
													<div class="cn">空气能</div>
													<div class="en">Air energy</div>
												</div>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('solution/list'); ?>">
										<div class="num">03</div>
										<div class="tab">
											<div class="tab_cell">
												<div class="cont">
													<div class="cn">壁挂炉</div>
													<div class="en">Wall-hung boiler</div>
												</div>
											</div>
										</div>
									</a>	
								</li>
								<li>
									<a href="<?php echo site_url('solution/list'); ?>">
										<div class="num">04</div>
										<div class="tab">
											<div class="tab_cell">
												<div class="cont">
													<div class="cn">商用新风</div>
													<div class="en">Commercial fresh air</div>
												</div>
											</div>
										</div>
									</a>	
								</li>
								<li>
									<a href="<?php echo site_url('solution/list'); ?>">
										<div class="num">05</div>
										<div class="tab">
											<div class="tab_cell">
												<div class="cont">
													<div class="cn">商用净水</div>
													<div class="en">Commercial water purification</div>
												</div>
											</div>
										</div>
									</a>	
								</li>
							</ul>
						</div>
						<div class="right">
							<ul>
								<li class="li active">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic" style="background:url(<?php echo static_file('web/img/ss1.jpg')?>) no-repeat center center;background-size:cover;"></a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</li>
								<li class="li">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic" style="background:url(<?php echo static_file('web/img/ss1.jpg')?>) no-repeat center center;background-size:cover;"></a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）222</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</li>
								<li class="li">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic" style="background:url(<?php echo static_file('web/img/ss1.jpg')?>) no-repeat center center;background-size:cover;"></a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）333</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</li>
								<li class="li">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic" style="background:url(<?php echo static_file('web/img/ss1.jpg')?>) no-repeat center center;background-size:cover;"></a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）444</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</li>
								<li class="li">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic" style="background:url(<?php echo static_file('web/img/ss1.jpg')?>) no-repeat center center;background-size:cover;"></a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）555</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</div>
					</div>

					<div class="swiper_solution w1440">
						<div class="swiper-container gallery-top">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="con">
										<div class="cn">太阳能</div>
										<div class="en">Solar energy</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="con">
										<div class="cn">空气能</div>
										<div class="en">Air energy</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="con">
										<div class="cn">壁挂炉</div>
										<div class="en">Wall-hung boiler</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="con">
										<div class="cn">商用新风</div>
										<div class="en">Commercial fresh air</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="con">
										<div class="cn">商用净水</div>
										<div class="en">Commercial water purification</div>
									</div>
								</div>
							</div>
						</div>

						<div class="swiper-container gallery-thumbs">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic">
										<img src="<?php echo static_file('web/img/ss1.jpg')?>" alt="">
									</a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic">
										<img src="<?php echo static_file('web/img/ss1.jpg')?>" alt="">
									</a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic">
										<img src="<?php echo static_file('web/img/ss1.jpg')?>" alt="">
									</a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic">
										<img src="<?php echo static_file('web/img/ss1.jpg')?>" alt="">
									</a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('solution/list'); ?>" class="pic">
										<img src="<?php echo static_file('web/img/ss1.jpg')?>" alt="">
									</a>
									<div class="pro">
										<ul>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss2.png')?>" alt="">
													</div>
													<div class="txt">睡眠宝新风机（穿墙式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/1111.png')?>" alt="">
													</div>
													<div class="txt">中央新风系统（吊顶式）</div>
												</a>
											</li>
											<li>
												<a href="<?php echo site_url('hwliving/detail'); ?>">
													<div class="tu">
														<img src="<?php echo static_file('web/img/ss4.png')?>" alt="">
													</div>
													<div class="txt">壁挂式新风系统MF-B100</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="wrap fafafa">
					<div class="wrap_cen w1440 wow fadeInUp">
						<div class="title">
							<div class="cn">商用方案</div>
							<div class="en">Commercial solutions</div>
						</div>
						<div class="ds">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>

					</div>
					<div class="item_box wow fadeInUp">
						<div class="item">
							<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
								<span class="mask"></span>
								<div class="pic">
									<img src="<?php echo static_file('web/img/solution_f.jpg')?>" alt="">
								</div>
								<div class="text_box">
									<div class="t">学校采暖定制解决方案</div>
									<div class="model">商用采暖解决方案</div>
									<div class="range">适用范围：学校</div>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
								<span class="mask"></span>
								<div class="pic">
									<img src="<?php echo static_file('web/img/solution_f.jpg')?>" alt="">
								</div>
								<div class="text_box">
									<div class="t">学校采暖定制解决方案</div>
									<div class="model">商用采暖解决方案</div>
									<div class="range">适用范围：学校</div>
								</div>
							</a>
						</div>
						<div class="item">
							<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
								<span class="mask"></span>
								<div class="pic">
									<img src="<?php echo static_file('web/img/solution_f.jpg')?>" alt="">
								</div>
								<div class="text_box">
									<div class="t">学校采暖定制解决方案</div>
									<div class="model">商用采暖解决方案</div>
									<div class="range">适用范围：学校</div>
								</div>
							</a>
						</div>		
					
					</div>


					<div class="wbox w1440 wow fadeInUp">
						<div class="title">
							<div class="cn">工程案例</div>
							<div class="en">ENGINEERING  PROJECTS</div>
						</div>
						<div class="ds">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>

						<div class="wbox_list">
							<ul class="f-cb">
								<li>
									<a href="javascript:;">
										<div class="pic">
											<img src="<?php echo static_file('web/img/case1.jpg')?>" alt="">
										</div>
										<div class="txt">河南洛阳四季沐歌生产基地</div>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<div class="pic">
											<img src="<?php echo static_file('web/img/case2.jpg')?>" alt="">
										</div>
										<div class="txt">常熟锦宏印染厂工业预加热太阳能工程</div>
									</a>
								</li>
								<li>
									<a href="javascript:;">
										<div class="pic">
											<img src="<?php echo static_file('web/img/case3.jpg')?>" alt="">
										</div>
										<div class="txt">宁夏灵武市白芨滩全智能温室大棚</div>
									</a>
								</li>
							</ul>
							<a class="read_more"  href="<?php echo site_url('solution/case'); ?>">
								<span class="txt">更多案例</span>
								<img src="<?php echo static_file('web/img/j.png')?>" alt="">
							</a>
						</div>
					</div>

					<div class="link_list wow fadeInUp">
						<ul class="f-cb">
							<li>
								<a href="<?php echo site_url('solution/cooperation'); ?>">
									<div class="pic">
										<img src="<?php echo static_file('web/img/sj1.jpg')?>" alt="">
									</div>
									<div class="cont">
										<div class="title">
											<div class="cn">集采战略合作伙伴</div>
											<div class="en">ENGINEERING  PROJECTS</div>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="">
									<div class="pic">
										<img src="<?php echo static_file('web/img/sj2.jpg')?>" alt="">
									</div>
									<div class="cont">
										<div class="title">
											<div class="cn">项目需求提交</div>
											<div class="en">ENGINEERING  PROJECTS</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- <div class="service_box  wow fadeInUp w1440">
					<div class="ti">售后服务</div>
					<div class="box">
						<ul class="f-cb">
							<li>
								<a href="#">
									<div class="ico">
										<img src="<?php echo static_file('web/img/q.png')?>" alt="">
									</div>
									<div class="con">
										<div class="t">咨询在线客服</div>
										<div class="des">为您提供贴心服务</div>
									</div>
								</a>
							</li>
							<li>
								<a href="http://www.baidu.com" target="_blank">
									<div class="ico">
										<img src="<?php echo static_file('web/img/s1.png')?>" alt="">
									</div>
									<div class="con">
										<div class="t">用户社区</div>
										<div class="des">了解更多 ></div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="ico">
										<img src="<?php echo static_file('web/img/add.png')?>" alt="">
									</div>
									<div class="con">
										<div class="t">附近服务网点</div>
										<div class="des">提供服务网点及地址及联系方式查询</div>
									</div>
								</a>
							</li>
							<li>
								<div class="code">
									<img src="<?php echo static_file('web/img/code.jpg')?>" alt="">
								</div>
								<div class="txt">四季沐歌服务公众号</div>
							</li>
						</ul>
					</div>
				</div> -->
			</div>
			
		</section>

		<div class="mask_bg"></div>
		<div class="detail_box detail_box2">
			<div class="prev prev2"></div>
			<div class="next next2"></div>
			<div class="close"></div>
			<div class="db">
				
			</div>
		</div>

    	<?php include_once VIEWS.'inc/footer.php'; ?>
	</div>
	<script>
		$(function(){
			$('header .bocweb-nav ul li').eq(3).addClass('active');

			$('.wbox_list ul li').click(function(){
			var top=$(this).offset().top-30;
			$('.detail_box').css('top',top);

			$.ajax({
				url:'<?php echo site_url('ajax/solution_case'); ?>',
				success:function(data){
					$('.db').empty().append(data);
					$('.detail_box,.mask_bg').addClass('active');
					
					$('.close').click(function(){
						$('.detail_box,.mask_bg').removeClass('active');
					})	
				}
			})

		})
		$('.detail_box .prev,.detail_box .next').click(function(){
			$.ajax({
				url:'<?php echo site_url('ajax/solution_case'); ?>',
				success:function(data){
					$('.db').empty().append(data);
					$('.detail_box,.mask_bg').addClass('active');
				}
			})
		})




			$('.solution_list .pro .tu').height(Math.floor($('.solution_list .pro .tu').width()*(150/280)));
			$('.swiper_solution .pro .tu').height(Math.floor($('.swiper_solution .pro .tu').width()*(150/280)));
			
			$('.wbox_list ul li .pic').height(Math.floor($('.wbox_list ul li .pic').width()*(285/450)));
			$('.link_list ul li .pic').height(Math.floor($('.link_list ul li .pic').width()*(500/960)));

			$(window).resize(function(){
				$('.wbox_list ul li .pic').height(Math.floor($('.wbox_list ul li .pic').width()*(285/450)));
				$('.solution_list .pro .tu').height(Math.floor($('.solution_list .pro .tu').width()*(150/280)));
				$('.swiper_solution .pro .tu').height(Math.floor($('.swiper_solution .pro .tu').width()*(150/280)));
				$('.link_list ul li .pic').height(Math.floor($('.link_list ul li .pic').width()*(500/960)));
			})

			$('.left ul li').mouseover(function(){
				$(this).addClass('active').siblings().removeClass('active');
				var index=$(this).index();
				$('.right .li').eq(index).addClass('active').siblings('.li').removeClass('active');
			})


			var galleryTop = new Swiper('.gallery-top', {
			      spaceBetween: 10,
			      slidesPerView: 3,
			      loop:true,
			      loopedSlides: 5,
			      slideToClickedSlide: true,
			      breakpoints: { 
				    650: {
				      slidesPerView: 2,
				      spaceBetween: 10
				    }
				  }

		    });
		    var galleryThumbs = new Swiper('.gallery-thumbs', {
		      spaceBetween: 10,
		      slidesPerView: 1,
		      touchRatio: 0.2,
		      loop:true,
		      loopedSlides: 5,
		     
		    });
		    galleryTop.controller.control = galleryThumbs;
		    galleryThumbs.controller.control = galleryTop;



		    $('.swiper_solution .pic').height(Math.floor($('.swiper_solution .pic').width()*(700/1020)));
		    $(window).resize(function(){
		    	$('.swiper_solution .pic').height(Math.floor($('.swiper_solution .pic').width()*(700/1020)));
		    })
		    $('.item_box').slick({
			    arrows: true,
		        centerMode: true,
		        centerPadding: '360px',
		        slidesToShow: 1,
		        infinite:false,
		        responsive: [
				    {
				      breakpoint: 1300,
				      settings: {
				      	 centerMode: true,
				         centerPadding: '200px',
				      	}
				    },
				    {
				      breakpoint: 900,
				      settings: {
				      	 centerMode: true,
				         centerPadding: '140px',
				      	}
				    },
				    {
				      breakpoint: 720,
				      settings: {
				      	 centerMode: true,
				         centerPadding: '0px',
				      	}
				    }
				],
				onInit:function(){
					var w=$('.item .pic').width()-parseInt($('.slick-list').css('padding-left'))*2;
					console.log(w)
					$('.item .pic').height(Math.floor(w*(600/1080)));
					$(window).resize(function(){
						w=$('.item .pic').width()-parseInt($('.slick-list').css('padding-left'))*2;
						$('.item .pic').height(Math.floor(w*(600/1080)));
					})
					
				}

			});
		})
	</script>
</body>
</html>

